<template>
    <div id="apo">
        <div class="header">
            <div>
                <img src="../../static/images/sousuo.png" alt="">
                <input type="text" placeholder="搜索课程" v-model="keys"><!--VIP会员，畅学6万元好课-->
            </div>
            <div><span @click="suo">搜索</span></div>
        </div>
<!--        <div class="name">
            <div @click="div1(0)" :class="this.div ==0?Classgreen:''">课程</div>
            <div @click="div1(1)" :class="this.div ==1?Classgreen:''">书籍</div>
            <div @click="div1(2)" :class="this.div ==2?Classgreen:''">知识点</div>
        </div>
        <div class="names">
            <div :class="this.div ==0?Classblo:''">
                <div class="name erji">
                    <div @click="div2(0)" :class="this.div ==0?Classgre:''">好评</div>
                    <div @click="div2(1)" :class="this.div ==1?Classgre:''">畅销</div>
                    <div @click="div2(2)" :class="this.div ==2?Classgre:''">全部</div>
                </div>
                <div class="names">
                    <div :class="this.divs ==0?Classbl:''">0-1</div>
                    <div :class="this.divs ==1?Classbl:''">0-1</div>
                    <div :class="this.divs ==2?Classbl:''">0-2</div>
                </div>
            </div>
            <div :class="this.div ==1?Classblo:''">1</div>
            <div :class="this.div ==2?Classblo:''">2</div>
        </div>-->

        <div class="ty" v-for="item in list">
            <div>
                <img :src="item.img_url" alt="">
            </div>
            <div>
                <div>{{item.class_title}}</div>
                <div>1888人学过</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
	export default {
		name: "",
		data() {
			return {
                keys:'',
			    divs:0,
                Classbl:'blo',
                Classgre:'zi',
			    div:0,
                Classgreen:"border",
                Classblo:"blo",
                list:{}
            }
		},
		methods: {
            suo:function(x){
                // var v = 0 || x;
                // // console.log(v)

                //判断空
                if(this.keys.length != 0){
                    let param =new Object();
                    param.keyword=this.keys;
                    param.pagenow=1;
                    param.pagesize=21;
                    param.selling=0;
                    param.follow=0;//关注

                    // param.append("keyword",this.keys);
                    // param.append("pagenow",1);
                    // param.append("pagesize",1);
                    // param.append("selling",1);
                    // param.append("follow",1);
                    var par = JSON.stringify(param);
                    this.$ajax({
                        method:'post',
                        url:'http://134.175.237.162/index.php/info/searchCourse',
                        data:par
                    }).then((res)=>{
                        if(res.data.code==0){
                            this.list = res.data.data.data;
                            //\\console.log(this.list);
                        }else{
                            //console.log('请求异常')
                            Toast({
                                message: '关键字不对哦',
                                position: 'bottom',
                                duration: 5000
                            });
                        }
                        //console.log(res.data.data.data)
                    }).catch(()=>{
                        console.log('网络异常')
                    })
                }else{
                    Toast({
                        message: '不能为空',
                        position: 'bottom',
                        duration: 5000
                    });
                }

            },
            div1:function (s) {
                this.div = s;
            },
            div2:function (s) {
                this.divs = s;
            }
		}
	}
</script>

<style scoped>
    .ty{display: flex;padding: 10px}
    .ty>div:first-child img{width: 110px}
    .ty>div:last-child{margin-left: 10px}
    .ty>div:last-child>div:first-child{font-weight: bold}
    .header{
        padding: 4px 10px;
        background-color:#efeff4;
        display: flex;
        justify-content: space-between;
    }
    .header>div:first-child{
        width: 80%;
        background-color: white;
        border:1px solid #dadadf;
        border-radius: 18px;
        padding: 3px 10px;
    }
    .header img{width: 12px;vertical-align: middle}
    input[type='text']{
        vertical-align: middle;
        font-size: 14px;
        border:none;
        outline: none;
        width: 80%;
        height: 20px;
        margin-bottom: 0;
        padding: 10px 4px;
    }
    .header>div:last-child{
        line-height: 30px;
        width: 20%;
        text-align: center;
        color: #009900;
    }
    #apo{background-color: white}
    .name{
        display: flex;
        text-align: center;
    }
    .name>div{flex: 1; padding: 5px;}
    .name>div.border{
        border-bottom:2px solid green;
    }
    .name>div.zi{color:green}
    .names>div{
        display:none;
    }
    .names>div.blo{
        display:block;
    }
    .erji{width: 150px}
</style>
